<template>
  <div>
    <div class="send-view">
      <div class="main-container">
        <el-tabs v-model="activeTabPane">
          <el-tab-pane :label="$t('tab.send_btc')" name="btc" style="width: 60%;">
            <div style="font-size: 14px; margin-bottom: 20px;">帳戶餘額: 0.00000000 BTC</div>
            <el-form label-position="top" :model="sendBTC">
              <el-form-item label="">
                <el-input v-model="sendBTC.address" placeholder="BTC地址或郵件地址">
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    slot="append"
                    multiple
                    :limit="3">
                    <el-button icon="iconfont icon-erweima"></el-button>
                  </el-upload>
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-col :span="11"><el-input v-model="sendBTC.num" placeholder="0.00"><i slot="suffix">BTC</i></el-input></el-col>
                <el-col :span="2" class="tc">
                  <i class="el-icon-d-caret" style="transform:rotate(90deg); font-size: 20px;"></i>
                </el-col>
                <el-col :span="11"><el-input v-model="sendBTC.value" placeholder="0"><i slot="suffix">USD</i></el-input></el-col>
              </el-form-item>
              <el-form-item label="活动形式">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="留言" v-model="sendBTC.notes"></el-input>
              </el-form-item>
              <el-form-item size="large">
                <el-button type="primary">发送比特币</el-button>
              </el-form-item>
            </el-form>
            <ul class="notes-list">
              <li>您每天可以透過簡訊 (SMS) 方式進行雙層驗證的次數為 20 次，目前您還剩 20 次的驗證次數。當您的驗證次數抵達上限後，需要等待次日 0 時重置。建議您使用 Google 驗證器或是 Authy 來進行雙層驗證，透過此類 APP 將不會有驗證次數的限制。</li>
            </ul>
          </el-tab-pane>
          <el-tab-pane :label="$t('tab.send_eth')" name="eth" style="width: 60%;">
            <div style="font-size: 14px; margin-bottom: 20px;">帳戶餘額: 0.00000000 ETH</div>
            <el-form label-position="top" :model="sendBTC">
              <el-form-item label="">
                <el-input v-model="sendBTC.address" placeholder="BTC地址或郵件地址">
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    slot="append"
                    multiple
                    :limit="3">
                    <el-button icon="iconfont icon-erweima"></el-button>
                  </el-upload>
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-col :span="11"><el-input v-model="sendBTC.num" placeholder="0.00"><i slot="suffix">BTC</i></el-input></el-col>
                <el-col :span="2" class="tc">
                  <i class="el-icon-d-caret" style="transform:rotate(90deg); font-size: 20px;"></i>
                </el-col>
                <el-col :span="11"><el-input v-model="sendBTC.value" placeholder="0"><i slot="suffix">USD</i></el-input></el-col>
              </el-form-item>
              <el-form-item label="活动形式">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="留言" v-model="sendBTC.notes"></el-input>
              </el-form-item>
              <el-form-item size="large">
                <el-button type="primary">发送以太币</el-button>
              </el-form-item>
            </el-form>
            <ul class="notes-list">
              <li>請使用完整的以太幣地址格式，例如: 0xaa2d0f5332fb894ca5eac8250ab586804a61923b</li>
              <li>MaiCoin 不支援智能合約（多數的 ICO 均使用智能合約），請確認您是透過傳統交易的形式來發送或接收以太幣。任何透過智能合約傳送以太幣所造成的損失，使用者須自行負責。</li>
              <li>您每天可以透過簡訊 (SMS) 方式進行雙層驗證的次數為 20 次，目前您還剩 20 次的驗證次數。當您的驗證次數抵達上限後，需要等待次日 0 時重置。建議您使用 Google 驗證器或是 Authy 來進行雙層驗證，透過此類 APP 將不會有驗證次數的限制。</li>
            </ul>
          </el-tab-pane>
          <el-tab-pane :label="$t('tab.send_ltc')" name="ltc" style="width: 60%;">
            <div style="font-size: 14px; margin-bottom: 20px;">帳戶餘額: 0.00000000 LTC</div>
            <el-form label-position="top" :model="sendBTC">
              <el-form-item label="">
                <el-input v-model="sendBTC.address" placeholder="BTC地址或郵件地址">
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    slot="append"
                    multiple
                    :limit="3">
                    <el-button icon="iconfont icon-erweima"></el-button>
                  </el-upload>
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <el-col :span="11"><el-input v-model="sendBTC.num" placeholder="0.00"><i slot="suffix">BTC</i></el-input></el-col>
                <el-col :span="2" class="tc">
                  <i class="el-icon-d-caret" style="transform:rotate(90deg); font-size: 20px;"></i>
                </el-col>
                <el-col :span="11"><el-input v-model="sendBTC.value" placeholder="0"><i slot="suffix">USD</i></el-input></el-col>
              </el-form-item>
              <el-form-item label="活动形式">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="留言" v-model="sendBTC.notes"></el-input>
              </el-form-item>
              <el-form-item size="large">
                <el-button type="primary">发送莱特币</el-button>
              </el-form-item>
            </el-form>
            <ul class="notes-list">
              <li>您每天可以透過簡訊 (SMS) 方式進行雙層驗證的次數為 20 次，目前您還剩 20 次的驗證次數。當您的驗證次數抵達上限後，需要等待次日 0 時重置。建議您使用 Google 驗證器或是 Authy 來進行雙層驗證，透過此類 APP 將不會有驗證次數的限制。</li>
            </ul>
          </el-tab-pane>
        </el-tabs>
        <div class="faq">
          <h4>常見問題</h4>
          <ul class="notes-list">
            <li>如何接收數位資產？</li>
            <li>從外部錢包轉移數位資產至 MaiCoin 錢包時，需要多少時間？</li>
            <li>為何從外部傳送比特幣至 MaiCoin 錢包，但一直沒收到？</li>
            <li>可以獲取新的地址嗎？舊的地址還能用嗎？</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      activeTabPane: this.$route.params.coin ? this.$route.params.coin : 'btc',
      sendBTC: {
        address: '',
        num: '',
        value: '',
        notes: ''
      }
    }
  },
  computed: {
    ...mapState({
      path: state => state.route.path
    })
  },
  methods: {
  },
  watch: {
    path () {
      this.activeTabPane = this.$route.params.coin ? this.$route.params.coin : 'btc'
    }
  },
  created () {
  }
}
</script>

<style lang="less">
  .send-view{
    .notes-list{
      padding-left: 15px;
      li{
        list-style: disc;
        font-size: 12px;
        line-height: 135%;
        color: #666;
        padding-bottom: 5px;
      }
    }
    .faq{
      margin: 30px 0;
      border-top: 1px dashed #ccc;
      padding-top: 30px;
      h4{
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
</style>
